Day6：網頁結構化資料

2024 iThome 鐵人賽

DAY 6

Modern Web

重新認識 FrontEnd系列第 6 篇

16th鐵人賽 seo json-ld

呆呆小將

2024-08-11 23:27:51

572 瀏覽

分享至

網頁結構化資料

前兩天有介紹到，在 SREP 搜尋結果頁中，各大搜尋引擎會根據你網頁中的內容以及 Meta Tag 去呈現你的搜尋外貌，但除了透過正常網站上下文去推斷之外，搜尋引擎還會透過站方提供的資料來去了解你的網站，其中允許的方式有三種：

JSON-LD：這是一種嵌入在 HTML 網頁的 <head> 和 <body> 元素內 <script> 標記中 JavaScript 標記法。由於標記不會與使用者可見的文字交錯，因此巢狀資料項目可透過更簡易的方式表達。
微資料：一種開放社群 HTML 規格，用於為結構化資料在 HTML 內容中建立巢狀結構。例如 RDFa 會使用 HTML 標籤屬性為您想要以結構化資料形式呈現的資源命名。通常用於 <body> 元素，但也可用於 <head> 元素。
RDFa：一種 HTML5 擴充功能，透過引入與使用者可見內容對應的 HTML 標記屬性來支援連結資料，可用於您想要對搜尋引擎描述的使用者內容。RDFa 經常用於 HTML 網頁的 <head> 和 <body> 部分。

以上內容出自於 Google 搜尋中心，但主要還是以 JSON-LD 為主，以食譜為例，下方為 Google 提供的使用方式

<html>
  <head>
    <title>How To Make Banana Bread</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Banana Bread Recipe",
      "description": "The best banana bread recipe you'll ever find! Learn how to use up all those extra bananas.",
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.7",
        "ratingCount": "123"
      },
      "video": {
        "@type": "VideoObject",
        "name": "How To Make Banana Bread",
        "description": "This is how you make banana bread, in 5 easy steps.",
        "contentUrl": "https://www.example.com/video123.mp4"
       }
    }
    </script>
  </head>
  <body>
  </body>
</html>

其中 @type 會影響搜尋引擎判斷你此網站內容的類別，並且若搜尋引擎有將類別內容判斷出來，你可以透過 video 屬性提供你想要讓使用者可以快速點閱的影片，增加對使用者的吸引力，如圖